
import React, { memo, useMemo, createRef } from "react";
import { Scrollbars } from "react-custom-scrollbars";
import ReactDOM from "react-dom";
import "es6-shim";
import moment from "moment";
import $ from "jquery";
import "antd/dist/antd.min.css";
import "./index.scss";
import zhCN from "antd/es/locale/zh_CN";
import "moment/locale/zh-cn";
import {
  Spin,
  Button as AntdButton,
  Modal as AntdModal,
  ConfigProvider
} from "antd";
moment.locale("zh-cn");

/*
 * 加载中 start
 * */

class Loading extends React.Component {
  render() {
    const {
      type,
      size,
      tip,
      opacity,
      spinning,
      wrapperClassName,
      children,
      ...reset
    } = this.props;

    let Fragments = "";

    let opacityClass = "";
    if (opacity) {
      //透明度为true意味透明
      if (opacity === true) {
        opacityClass = "ant-spin-transparent";
      }
    } else {
      if (opacity === undefined) {
        //透明度为false意味不透明
        opacityClass = "";
      } else {
        opacityClass = "ant-spin-opaque";
      }
    }

    if (type) {
      if (type === "point") {
        //自己写的loading

        Fragments = (
          <div className={`loading_mask ${opacityClass}`}>
            <div className="loading_point_container">
              <div className="point_container">
                <span className="point1 point"></span>
                <span className="point2 point"></span>
                <span className="point3 point"></span>
                <span className="point4 point"></span>
              </div>
              <div className="point_loading_text">{tip? tip: "数据汇总统计中，请稍候一会~"}</div>
            </div>
          </div>
        );
      } else {
        //icon图标的loading
        // let antIcon = <Icon type={type} spin {...reset} />;
        Fragments = (
          <Spin
            // indicator={antIcon}
            spinning={spinning}
            size={size}
            tip={tip? tip: "数据汇总统计中，请稍候一会~"}
            wrapperClassName={`${
              wrapperClassName ? wrapperClassName : ""
            } ${opacityClass}`}
          >
            {children}
          </Spin>
        );
      }
    } else {
      //默认loading
      Fragments = (
        <Spin
          {...reset}
          size={size}
          spinning={spinning}
          tip={tip? tip: "数据汇总统计中，请稍候一会~"}
          wrapperClassName={`${
            wrapperClassName ? wrapperClassName : ""
          } ${opacityClass}`}
        >
          {children}
        </Spin>
      );
    }
    return (
      <React.Fragment>
        {" "}
        {/*空标签*/}
        {Fragments}
      </React.Fragment>
    );
  }
}
/*
 * 加载中 end
 * */
/*
 * 弹出框
 * */
class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      afterClose: props.afterClose /*Modal 完全关闭后的回调*/,
      bodyStyle: props.bodyStyle /*Modal body 样式*/,
      closable: props.closable /*是否显示右上角的关闭按钮*/,
      footer:
        props.footer /*底部内容，当不需要默认底部按钮时，可以设为 footer={null}*/,
      mask: props.mask /*是否展示遮罩*/,
      maskClosable: props.maskClosable
        ? props.maskClosable
        : false /*Modal 完全关闭后的回调*/,
      maskStyle: props.maskStyle /*遮罩样式*/,
      okText: props.okText /*确认按钮文字*/,
      okType: props.okType /*确认按钮类型*/,
      style: props.style /*可用于设置浮层的样式，调整浮层位置等*/,
      title: props.title /*标题*/,
      width: props.width /*宽度*/,
      onCancel: props.onCancel /*点击遮罩层或右上角叉或取消按钮的回调*/,
      onOk: props.onOk /*点击确定回调*/,
      visible: props.visible /*对话框是否可见*/,
      zIndex: props.zIndex,
      className: props.className ? props.className : "" /**/,
      destroyOnClose: props.destroyOnClose ? props.destroyOnClose : true,
      ModalStyle: "Modal-1",
    };
  }

  selectType(type) {
    let width = 810;
    let ModalStyle = "Modal-1";
    switch (type) {
      case "1":
        width = 810;
        ModalStyle = "Modal-1";
        break;
      case "2":
        width = 810;
        ModalStyle = "Modal-2";
        this.setState({
          footer: null,
        });
        break;
      case "3":
        width = 588;
        ModalStyle = "Modal-3";
        break;
      default:
        width = 810;
        ModalStyle = "Modal-1";
    }
    this.setState({
      width: this.props.width ? this.props.width : width,
      ModalStyle: ModalStyle,
    });
    const Ref = createRef();
  }

  componentWillMount() {
    this.selectType(this.props.type);
  }

  render() {
    return (
      <AntdModal
        // ref={ref=>this.Modal=ref}
        ref={this.Ref}
        onOk={this.props.onOk}
        onCancel={this.props.onCancel}
        title={this.state.title}
        className={`initModel ${this.state.ModalStyle} ${this.state.className}`}
        style={this.state.style}
        okText={this.state.okText}
        maskClosable={this.state.maskClosable}
        mask={this.state.mask}
        maskStyle={this.props.maskStyle}
        closable={this.state.closable}
        destroyOnClose={this.state.destroyOnClose}
        bodyStyle={this.state.bodyStyle}
        afterClose={this.state.afterClose}
        visible={this.props.visible}
        centered={this.props.centered ? this.props.centered : true}
        width={this.state.width}
        zIndex={this.state.zIndex}
        closeIcon={
          this.state.ModalStyle === "Modal-1" ? (
            <i className={"modal-close-icon"}></i>
          ) : null
        }
        footer={
          this.state.footer === null
            ? null
            : this.state.footer
            ? this.state.footer
            : [
                <Button
                  key="onOk"
                  type="primary"
                  size="small"
                  color="green"
                  onClick={this.state.onOk}
                >
                  {this.props.okText ? this.props.okText : "确定"}
                </Button>,
                <Button
                  key="onCancel"
                  size="small"
                  color="blue"
                  onClick={this.state.onCancel}
                >
                  {this.props.cancelText ? this.props.cancelText : "取消"}
                </Button>,
              ]
        }
        id="AntdModal"
      >
        {this.props.children}
      </AntdModal>
    );
  }
}

/*
 * 按钮组件
 * */

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: props.type /*type:primary、default、默认primary*/,
      size: props.size /*size:large、normal、small默认normal*/,
      disabled: props.disabled ? true : false,
      color: props.color,
      value: props.value,
      shape: props.shape /*shape:round、circle、默认border-radius:4px*/,
      onClick: props.onClick,
      onChange: props.onChange,
      style: props.style,
      className: props.className ? props.className : "",
    };
  }
  componentWillReceiveProps(props) {
    this.setState({
      type: props.type /*type:primary、default、默认primary*/,
      size: props.size /*size:large、normal、small默认normal*/,
      disabled: props.disabled ? true : false,
      color: props.color,
      value: props.value,
      shape: props.shape /*shape:round、circle、默认border-radius:4px*/,
      onClick: props.onClick,
      onChange: props.onChange,
      style: props.style,
      className: props.className ? props.className : "",
    });
  }

  /*
   * size筛选:large、normal、small，不写默认为normal
   * */
  HandleSize = (size) => {
    switch (size) {
      case "large":
        return "btn-large";
      case "normal":
        return "btn-normal";
      case "small":
        return "btn-small";
      default:
        return "btn-size";
    }
  };

  /*
   * color筛选:orange、green、blue、red、mazarine(深蓝色)，不写默认为blue
   * */
  HandleColor = (color, disabled, type) => {
    if (type === "primary") {
      if (disabled) return "btn-disabled";
      else {
        switch (color) {
          case "orange":
            return "btn-orange";
          case "green":
            return "btn-green";
          case "blue":
            return "btn-blue";
          case "red":
            return "btn-red";
          case "mazarine":
            return "btn-mazarine";
          default:
            return "btn-orange";
        }
      }
    } else if (type === "default") {
      if (disabled) return "btn-disabled-default";
      else {
        switch (color) {
          case "orange":
            return "btn-orange-default";
          case "green":
            return "btn-green-default";
          case "blue":
            return "btn-blue-default";
          case "red":
            return "btn-red-default";
          case "mazarine":
            return "btn-mazarine-default";
          default:
            return "btn-orange-default";
        }
      }
    } else {
      if (disabled) return "btn-disabled";
      else {
        switch (color) {
          case "orange":
            return "btn-orange";
          case "green":
            return "btn-green";
          case "blue":
            return "btn-blue";
          case "red":
            return "btn-red";
          case "mazarine":
            return "btn-mazarine";
          default:
            return "btn-orange";
        }
      }
    }
  };

  handleHeight = (height) => {
    return {
      height: height + "px",
      lineHeight: height + "px",
    };
  };
  handleWidth = (width) => {
    return {
      width: width + "px",
    };
  };

  handleStyle = () => {
    let style = this.state.style ? this.state.style : {};
    if (this.props.height) {
      style = Object.assign({}, style, this.handleHeight(this.props.height));
    }
    if (this.props.width) {
      style = Object.assign({}, style, this.handleWidth(this.props.width));
    }
    // console.log(style)
    return { style };
  };
  render() {
    return (
      <ConfigProvider locale={zhCN}>
        <AntdButton
          className={`Button ${this.HandleSize(
            this.state.size
          )} ${this.HandleColor(
            this.state.color,
            this.state.disabled,
            this.state.type
          )} ${this.state.className}`}
          shape={this.state.shape}
          disabled={this.state.disabled}
          onClick={this.state.onClick}
          style={this.state.style}
          block={this.props.block}
          href={this.props.href}
          target={this.props.target}
        >
          {this.props.children ? this.props.children : this.state.value}
        </AntdButton>
      </ConfigProvider>
    );
  }
}
export {
  Loading,
  Modal
};
